<template>
  <div class="noticeMan">
    <a-row :gutter="24">
      <!-- <a-col :lg="24" :md="24" :sm="24">
        <div class="affixBox" @click="doAdd">+  发布公告</div>
      </a-col>-->
      <a-col :lg="24" :md="24" :sm="24">
        <a-card :bordered="false">
          <div class="operate">
            <a-button type="dashed" style="width: 100%" icon="plus" @click="doAdd">添加</a-button>
          </div>
          <a-divider />
          <a-list
            size="large"
            rowKey="id"
            :loading="loading"
            itemLayout="vertical"
            :dataSource="data"
          >
            <a-list-item :key="item.not_id" slot="renderItem" slot-scope="item">
              <a-list-item-meta>
                <div slot="title">
                  <div style="display: flex;justify-content: space-between;align-items: center;">
                    <span>{{ item.not_title }}</span>
                    <a-icon style="color:rgb(189, 188, 188)" type="delete" @click="del(item.not_id)" />
                  </div>
                </div>
                <template slot="description">
                  <div style="height:50px">{{ item.not_msg }}</div>
                </template>
              </a-list-item-meta>
              <div>{{ item.not_time }}</div>
            </a-list-item>
            <!-- <div slot="footer" style="text-align: center; margin-top: 16px;">
              <a-button @click="loadMore" :loading="loadingMore">加载更多</a-button>
            </div>-->
          </a-list>
        </a-card>
      </a-col>
    </a-row>
    <a-modal
      title="发布公告"
      :visible="visible"
      @ok="handleOk"
      :width="600"
      :height="500"
      :confirmLoading="confirmLoading"
      @cancel="handleCancel"
    >
      <a-card title class="card" :bordered="false">
        <div style="margin-bottom: 16px">
          <a-row :gutter="24">
            <a-col :lg="24" :md="24" :sm="24">
              <div style="display: flex;justify-content: space-between;align-items: center;">
                <span style="width:40px">标题:</span>
                <a-input
                  placeholder="请填写公告名称"
                  v-model="noticeTitle"
                  allowClear
                  @change="iptChange"
                />
              </div>
            </a-col>
            <a-col :lg="24" :md="24" :sm="24">
              <div
                style="display: flex;justify-content: space-between;align-items: center;margin-top:10px"
              >
                <span style="width:40px;margin-top: -120px;">详情:</span>
                <a-textarea
                  style="margin-top:8px;height:150px"
                  placeholder="请填写公告详情"
                  v-model="noticeDetail"
                  allowClear
                  @change="textChange"
                />
              </div>
            </a-col>
          </a-row>
        </div>
      </a-card>
    </a-modal>
  </div>
</template>

<script>
import { getNoticeList, getAddNotice, delNotice } from '@/api/notice'
import { TagSelect, StandardFormRow, ArticleListContent } from '@/components'
const TagSelectOption = TagSelect.Option

export default {
  components: {
    TagSelect,
    TagSelectOption,
    StandardFormRow,
    ArticleListContent
  },
  name: 'NoticeMan',
  data () {
    return {
      confirmLoading: false,
      visible: false,
      selectedRowKeys: [],
      loading: false,
      skeLoading: true,
      noticeTitle: '',
      noticeDetail: '',
      loadingMore: false,
      data: [
        // {
        //   not_id: 2,
        //   star: 120, // 点赞
        //   like: 321, // 收藏
        //   message: 222, // 评论
        //   not_title: 'title', // 文章标题
        //   avatar: '', // 头像
        //   href: '发布地址', // 发布地址
        //   not_time: '2016-0-5',
        //   owner: '发布用户', // 发布用户
        //   not_msg: '文章详情'// 文章详情
        // }
      ],
      form: this.$form.createForm(this)
    }
  },

  computed: {
    hasSelected () {
      return this.selectedRowKeys.length > 0
    }
  },
  created () {
    this.getNoticeList()
  },
  mounted () {
    // this.getList()
  },
  methods: {
    change (affixed) {
      // console.log(affixed)
    },
    handleOk (e) {
      this.confirmLoading = true
      if (this.noticeTitle !== '') {
        if (this.noticeDetail !== '') {
          this.visible = false
          this.confirmLoading = false
          this.getAddNotice(this.noticeTitle, this.noticeDetail)
        }
      } else {
        this.$message.info('请填写公告标题或详情!')
        this.visible = false
        this.confirmLoading = false
      }
      // setTimeout(() => {
      // }, 2000)
    },
    handleCancel (e) {
      // console.log('Clicked cancel button')
      this.visible = false
    },
    doAdd () {
      this.visible = true
      this.noticeTitle = ''
      this.noticeDetail = ''
    },

    del (val) {
      var that = this
      this.$confirm({
        title: '确定删除吗?',
        content: '',
        okText: '删除',
        okType: 'danger',
        cancelText: '取消',
        onOk () {
          that.delNotice(val)
          // console.log('OK', val)
        },
        onCancel () {
          // console.log('Cancel')
          that.$message.info('取消删除!')
        }
      })
    },

    iptChange (e) {
      // console.log('this.noticeTitle', this.noticeTitle)
      // console.log('ipt', e.target.value)
      //   this.noticeTitle = val
    },
    textChange (e) {
      // console.log(e.target.value)
      //   this.noticeDetail = val
    },
    loadMore () {},
    handleChange (value) {
      // console.log(`selected ${value}`)
    },
    setOwner () {
      const {
        form: { setFieldsValue }
      } = this
      setFieldsValue({
        owner: ['wzj']
      })
    },
    getNoticeList () {
      this.loading = true
      getNoticeList({})
        .then(res => {
          this.skeLoading = false
          // console.log('公告列表', res.request)
          this.data = res.result.map(function (obj) {
            var rObj = {}
            rObj.not_id = obj.not_id
            rObj.not_title = obj.not_title
            rObj.not_time = obj.not_time
            rObj.not_msg = obj.not_msg
            return rObj
          })
          this.loading = false
          // console.log(this.data)
        })
        .catch(err => {
          this.skeLoading = false
          this.loading = false
          console.log(err)
        })
    },
    getAddNotice (title, msg) {
      getAddNotice({
        title: title,
        msg: msg
      })
        .then(res => {
          this.$message.info('新增成功!')
          this.getNoticeList()
        })
        .catch(() => {
          this.$message.info('新增失败!')
        })
    },
    delNotice (msgId) {
      delNotice({
        msgId: msgId
      })
        .then(res => {
          this.$message.info('删除成功!')
          this.getNoticeList()
        })
        .catch(() => {
          // this.loading = false
        })
    }
  }
}
</script>
<style lang="less">

// p{
//   color:rgb(189, 188, 188)
// }
</style>
